<template>
	<el-form label-width="130px" :model="form" :rules="rules" ref="queryForm">
		<el-row>
			<el-col :span="12">

				<el-form-item label="行政区域" prop="district">
					<el-select v-model="form.district" size="default" placeholder="请选择" style="width:190px" clearable
						filterable>
						<el-option v-for="item in options" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue" />
					</el-select>
				</el-form-item>


				<el-form-item label="指挥所名称" prop="name">
					<el-input v-model="form.name" style="width: 190px;"></el-input>

				</el-form-item>

				<el-form-item label="指挥所类型" prop="cpType">
					<el-select v-model="form.cpType" size="default" placeholder="请选择" style="width: 190px" clearable
						filterable>
						<el-option v-for="item in zhstypeOptions" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue" />
					</el-select>
				</el-form-item>

				<el-form-item label="所属指挥部" prop="headCode">
					<el-select v-model="form.headCode" size="default" placeholder="请选择" style="width: 190px" clearable
						filterable>
						<el-option v-for="item in zhbOptions" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue" />
					</el-select>
				</el-form-item>

				<el-form-item label="指挥所简称" prop="cpShort">
					<el-input v-model="form.cpShort" style="width: 190px;"></el-input>
				</el-form-item>

				<el-form-item label="工程类型" prop="cpFuncDes">
					<el-input v-model="form.cpFuncDes" style="width: 190px;"></el-input>
				</el-form-item>

				<el-form-item label="防核武器等级" prop="preNuclearClass">
					<el-select v-model="form.preNuclearClass" size="default" placeholder="请选择" style="width: 190px"
						clearable filterable>
						<el-option v-for="item in fhwqdjOptions" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue" />
					</el-select>
				</el-form-item>

				<el-form-item label="防化级别" prop="preCmldefClass">
					<el-select v-model="form.preCmldefClass" size="default" placeholder="请选择" style="width: 190px"
						clearable filterable>
						<el-option v-for="item in fhjbOptions" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue" />
					</el-select>
				</el-form-item>

				<el-form-item label="经度" prop="longitude">
					<el-input v-model="form.longitude" style="width: 190px;"
						@input="e => regOnlyNumSpot(e, form, 'longitude', 12)"></el-input>
				</el-form-item>

				<el-form-item label="海拔" prop="elevation">
					<el-input v-model="form.elevation" style="width: 190px;"
						@input="e => regOnlyNumSpot(e, form, 'elevation', 2)"></el-input>
				</el-form-item>

				<el-form-item label="建筑面积" prop="coveredArea">
					<el-input v-model="form.coveredArea" style="width: 190px;"
						@input="e => regOnlyNumSpot(e, form, 'coveredArea', 2)"></el-input>
				</el-form-item>

				<el-form-item label="使用面积" prop="usableArea">
					<el-input v-model="form.usableArea" style="width: 190px;"
						@input="e => regOnlyNumSpot(e, form, 'usableArea', 2)"></el-input>
				</el-form-item>

				<el-form-item label="设备要素房间数量" prop="principal">
					<el-input v-model="form.principal" style="width: 190px;"
						@input="e => regOnlyNumSpot(e, form, 'principal', 0)"></el-input>
				</el-form-item>

				<el-form-item label="口部数量" prop="oralNumber">
					<el-input v-model="form.oralNumber" style="width: 190px;"
						@input="e => regOnlyNumSpot(e, form, 'oralNumber', 0)"></el-input>
				</el-form-item>

				<el-form-item label="指挥所控制手段" prop="comControl">
					<el-input v-model="form.comControl" style="width: 190px;"></el-input>
				</el-form-item>


			</el-col>
			<el-col :span="12">


				<el-form-item label="通信设备" prop="communicationDev">
					<el-input v-model="form.communicationDev" style="width: 190px;"></el-input>
				</el-form-item>

				<el-form-item label="工程健全情况" prop="projectSane">
					<el-select v-model="form.projectSane" size="default" placeholder="请选择" style="width: 190px"
						clearable filterable>
						<el-option v-for="item in gcjqqkOptions" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue" />
					</el-select>
				</el-form-item>

				<el-form-item label="批准文号" prop="approval">
					<el-input v-model="form.approval" style="width: 190px;"></el-input>
				</el-form-item>

				<el-form-item label="管理单位" prop="managementUnit">
					<el-input v-model="form.managementUnit" style="width: 190px;"></el-input>
				</el-form-item>

				<el-form-item label="联系人" prop="contact">
					<el-input v-model="form.contact" style="width: 190px;"></el-input>
				</el-form-item>

				<el-form-item label="联系电话" prop="contactNumber">
					<el-input v-model="form.contactNumber" style="width: 190px;"
						@input="e => regOnlyNumSpot(e, form, 'contactNumber', 0)" maxlength="11"></el-input>
				</el-form-item>



				<el-form-item label="防常规武器等级" prop="preWeaponClass">
					<el-select v-model="form.preWeaponClass" size="default" placeholder="请选择" style="width: 190px"
						clearable filterable>
						<el-option v-for="item in fcgswqdjOptions" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue" />
					</el-select>
				</el-form-item>

				<el-form-item label="纬度" prop="latitude">
					<el-input v-model="form.latitude" style="width: 190px;"
						@input="e => regOnlyNumSpot(e, form, 'latitude', 12)"></el-input>
				</el-form-item>

				<el-form-item label="详细地址" prop="detailedAddress">
					<el-input v-model="form.detailedAddress" style="width: 190px;"></el-input>
				</el-form-item>

				<el-form-item label="指挥要素房间数量" prop="comRoomNumber">
					<el-input v-model="form.comRoomNumber" style="width: 190px;"
						@input="e => regOnlyNumSpot(e, form, 'comRoomNumber', 0)"></el-input>
				</el-form-item>

				<el-form-item label="连接通信网络" prop="communicationNetwork">
					<el-input v-model="form.communicationNetwork" style="width: 190px;"></el-input>
				</el-form-item>

				<el-form-item label="工程完成情况" prop="projectCompletion">
					<el-select v-model="form.projectCompletion" size="default" placeholder="请选择" style="width: 190px"
						clearable filterable>
						<el-option v-for="item in gcwcqkOptions" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue" />
					</el-select>
				</el-form-item>

				<el-form-item label="建设单位" prop="constructionUnit">
					<el-input v-model="form.constructionUnit" style="width: 190px;"></el-input>
				</el-form-item>

				<el-form-item label="工作人员数量" prop="staffNumber">
					<el-input v-model="form.staffNumber" style="width: 190px;"
						@input="e => regOnlyNumSpot(e, form, 'staffNumber', 0)"></el-input>
				</el-form-item>


			</el-col>
		</el-row>

		<div style="display: flex;justify-content: flex-end;">
			<el-button @click="closethis()" @keyup.prevent @keydown.enter.prevent>取消</el-button>
			<el-button type="primary" @click="submit(queryForm)" @keyup.prevent @keydown.enter.prevent>确定</el-button>
		</div>
	</el-form>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'

	import {
		commonInterface
	} from '@/api/common/common'

	import {
		regOnlyNumSpot
	} from '@/utils/reg'

	const emit = defineEmits(['getList', 'closeWindow'])
	const props = defineProps(['editData', 'zhbOptions', 'zhstypeOptions', 'fcgswqdjOptions', 'fhwqdjOptions',
		'fhjbOptions', 'gcwcqkOptions', 'gcjqqkOptions', 'options'
	])

	const form = ref({})

	const queryForm = ref('')

	const zhbOptions = ref()
	const zhstypeOptions = ref()
	const fcgswqdjOptions = ref()
	const fhwqdjOptions = ref()
	const fhjbOptions = ref()
	const gcwcqkOptions = ref()
	const gcjqqkOptions = ref()

	const options = ref()


	//必填项
	const rules = reactive({

		name: [{
			required: true,
			message: "此选项不能为空!",
			trigger: "blur"
		}],
		cpType: [{
			required: true,
			message: "此选项不能为空!",
			trigger: "change"
		}],
		headCode: [{
			required: true,
			message: "此选项不能为空!",
			trigger: "change"
		}],
		district: [{
			required: true,
			message: "此选项不能为空!",
			trigger: "change"
		}]

	})
	//取消
	const closethis = () => {
		emit('closeWindow')
	}

	//确定
	const submit = async (e) => {
		if (!e) return
		await e.validate((valid) => {
			if (valid) {
				let method = 'post'
				if (props.editData) method = 'put'
				commonInterface('/back/renfang/zhtx/posta/', form.value, method).then(result => {
					if (result.code === 200) {
						ElMessage.success(result.msg)
						emit('closeWindow')
						emit('getList')
					} else {
						ElMessage.error(result.msg)
					}
				})
			}
		})
	}

	onMounted(() => {
		options.value = props.options
		zhbOptions.value = props.zhbOptions
		zhstypeOptions.value = props.zhstypeOptions
		fcgswqdjOptions.value = props.fcgswqdjOptions
		fhwqdjOptions.value = props.fhwqdjOptions
		fhjbOptions.value = props.fhjbOptions
		gcwcqkOptions.value = props.gcwcqkOptions
		gcjqqkOptions.value = props.gcjqqkOptions
		if (props.editData) form.value = props.editData
	})
</script>

<style>
</style>